<template>
  <yd-ls-layout title="首页" :torgtxt="signTitle" @handle-rgtxt-button="signed">
    <div class="yd-ls-height"></div>
    <div class="yd-grids-3 yd-ls-ind-grids-box">
      <a href="photo.html" class="yd-grids-item router-link-exact-active router-link-active">
        <div class="yd-grids-icon"><yd-icon color="#4870f3" name="paizhao" custom></yd-icon></div>
        <div class="yd-grids-txt"><span>拍照上传</span></div>
      </a>
      <a href="#/bill" class="yd-grids-item router-link-exact-active router-link-active">
        <div class="yd-grids-icon">
          <yd-icon color="#ec6022" name="shenpi" custom></yd-icon>
        </div>
        <div class="yd-grids-txt"><span>我的病历</span></div>
        <i class="yd-tabbar-dot" v-if="isDot"></i>
      </a>
      <a :href="urlMedicine" class="yd-grids-item router-link-exact-active router-link-active">
        <div class="yd-grids-icon"><yd-icon color="#9a57b5" name="zhaoyaopin" custom></yd-icon></div>
        <div class="yd-grids-txt"><span>找药买药</span></div>
      </a>
    </div>

    <yd-ls-title lftit="药品推荐" rgtit="换一批" @rg-title="refresh"></yd-ls-title>
    <yd-grids-group :rows="4"  class="yd-ls-ind-grids-group" >
      <yd-grids-item v-for="(items, index) in recommend"
                     :key="index"
                     @click.native="medicine(items.drug_id)">
        <img slot="icon" :src="items.drug_pic">
        <span slot="text" v-text="items.drug_name"></span>
      </yd-grids-item>
    </yd-grids-group>

    <yd-ls-title lftit="我的消息" rgtit=""></yd-ls-title>
    <yd-list theme="4" class="yd-ls-ind-list">
      <yd-list-item v-for="items in msglist"
                    :key="items.msg_id"
                    @click.native="mymsg(items.msg_type, items.drid, items.msg_id, items.name)">
        <img slot="img" :src="items.head || defalut_img">
        <span slot="title">
          <span style="position:relative">{{ items.name }}<i class="yd-tabbar-dot" v-if="items.unread"></i></span>
          <span v-text="items.createtime"></span>
        </span>
        <yd-list-other slot="other">
          <div v-html="items.content"></div>
          <!-- <span style="color: #4870f3">咨询中</span>
          <span style="color: #ff685d">已结束</span> -->
        </yd-list-other>
      </yd-list-item>

    </yd-list>
    <yd-ls-default v-if="!msglist.length">暂无消息记录</yd-ls-default>
    <yd-ls-more v-if="msgTotal > msglist.length" @click.native="loadmore()"></yd-ls-more>
    <div class="yd-ls-height"></div>
  </yd-ls-layout>
</template>

<style>

  .yd-ls-ind-grids-box .yd-grids-item .yd-tabbar-dot {
    top: .7rem;
    margin-left: -1rem;
  }
  .yd-ls-ind-grids-box .yd-grids-icon i {
    width: 1.14rem;
    line-height: 1.14rem;
    height: 1.14rem;
    text-align: center;
    display: inline-block;
    border-radius: 50%;
    overflow: hidden;
  }
  .yd-ls-ind-grids-box .yd-grids-icon {
    height: 1.4rem;
  }
  .yd-ls-ind-grids-group .yd-grids-icon {
    height: 1.4rem;
    width: 1.4rem;
    overflow: hidden;
    margin: 0 .23rem;
  }
  .yd-ls-ind-grids-group .yd-grids-icon img {
    height: 100%;
  }
  .yd-ls-ind-grids-box .yd-grids-item:nth-of-type(1) .yd-grids-icon i {
    background-color: #e6f0fe;
  }
  .yd-ls-ind-grids-box .yd-grids-item:nth-of-type(2) .yd-grids-icon i {
    background-color: #fce9e0;
  }
  .yd-ls-ind-grids-box .yd-grids-item:nth-of-type(3) .yd-grids-icon i {
    background-color: #f1e7f5;
  }

  .yd-ls-ind-list.yd-list {
    padding: 0;
  }

  .yd-ls-ind-list.yd-list .yd-list-item {
    padding: 0.2rem 0.3rem;
    line-height: initial;
  }

  .yd-ls-ind-list.yd-list .yd-list-item .yd-list-img {
    width: 0.7rem;
    padding: 0.35rem 0;
    border-radius: 50%;
    margin-right: 0.2rem;
  }

  .yd-ls-ind-list.yd-list .yd-list-item .yd-list-img img {
    height: 0.7rem;
  }
  .yd-ls-ind-list.yd-list .yd-list-item .yd-list-mes .yd-list-other {
    padding-top: 0;
  }
  .yd-ls-ind-list.yd-list .yd-list-item .yd-list-title span span:last-child{
    float: right;
    font-size: 12px;
    color: #919191;
    font-weight: normal;
  }
  .yd-ls-ind-list.yd-list .yd-list-item .yd-list-other div{
    width: 4rem;
    font-size: 0.24rem;
    text-overflow:ellipsis;
    overflow:hidden;
    white-space:nowrap;
  }
  .yd-ls-ind-list.yd-list .yd-list-item .yd-list-mes .yd-list-title {
    font-size: .28rem;
  }

</style>
<script>
  import ydLsLayout from '../../../components/yd-ls-layout.vue'
  import ydLsTitle from '../../../components/yd-ls-title.vue'
  import ydLsDefault from '../../../components/yd-ls-default.vue'
  import ydLsMore from '../../../components/yd-ls-more.vue'
  import api from '../../../axios/api'

  export default {
    name: 'home',
    data () {
      return {
        urlMedicine: `${api.shop_host}/TopMallWeb/mGoodsAction!goIndex.action?openid=${localStorage.openId}&ramid=${new Date()}`,
        isDot: false,
        msglist: [],
        recommend: [],
        pageIndex: 1,
        pageSize: 4,
        total: 0,
        msgIndex: 1,
        msgSize: 5,
        msgTotal: 0,
        isSign: false,
        signTitle: '签到',
        defalut_img: api.default_img_dot // 医生缺省头像
      }
    },
    created() {
      //TODO:初始化数据
      // localStorage.openId = 'o8HFNwh9MjxfAd5e3CIVlKcm216g';

      this.msgIndex = 1
      this.getMsgList('reload')
      sessionStorage.isbillpic = 0
    },
    methods: {
      init () {
      },
      medicine (id) {
        this.$router.push({ path: 'medicine', query: { id: id }})
      },
      mymsg (type, id, msg_id, name) {
        if(type == 1) {
          let vuex_msg = {type: 'home', drid: id, msgid: msg_id, drname: name}
          this.$store.dispatch('fetchMsgInfo', vuex_msg)
          this.$router.push({ path: 'message', query: vuex_msg})
          return
        }
        this.$router.push({ path: 'systemmsg'})
      },
      getMsgList(loadType) {// 加载消息列表
        this.$dialog.loading.open(api.default_loading_txt);
        this.axios.get(api.msg_list,{
          params: {
            load_type: loadType,
            pageindex: this.msgIndex,
            pagesize: this.msgSize
          }
        })
        .then(m=>{
          let mymsg_data = m.data
          this.msgTotal = mymsg_data.pageinfo.total
          if(loadType === 'next'){
            this.$dialog.loading.close()
            this.msglist = this.msglist.concat(mymsg_data.data.msgItems)
            return
          }
          this.msglist = mymsg_data.data.msgItems
          this.getHomeUnread()
        }).catch(err=>{
          this.$dialog.loading.close()
          this.$dialog.alert({mes: JSON.stringify(err)})
        })
      },
      getRecommend() {// 加载药品推荐列表
        this.axios.get(api.recommend_list, {
          params: {
            pageindex: this.pageIndex,
            pagesize: this.pageSize
          }
        }).then(m=>{
          let recommend_data = m.data
          this.total = recommend_data.pageinfo.total
          this.recommend = recommend_data.data
          this.$dialog.loading.close()
        }).catch(err=>{
          this.$dialog.loading.close()
          this.$dialog.alert({mes: JSON.stringify(err)})
        })
      },
      getHomeUnread() {
        this.axios.get(api.home_unread)
        .then(m=>{
            // 首页底部红点
            let home_unread_data = m.data
            this.isDot = home_unread_data.data.order_unread
            sessionStorage.index_unread = home_unread_data.data.index_unread
            this.$store.dispatch('fetchHomeUnread', sessionStorage.index_unread)
            
            this.isSign = home_unread_data.data.is_sign
            this.signTitle = (this.isSign) ? '已签到' : '签到'

            let signDom = document.getElementsByClassName('yd-navbar-item')[0].firstChild
            signDom.style.color = (this.isSign) ? '#b2b2b2' : '#ffffff'

            this.getSeekUnread()
        }).catch(err=>{
          this.$dialog.loading.close()
          this.$dialog.alert({mes: JSON.stringify(err)})
        })
      },
      getSeekUnread() {
        this.axios.get(api.seek_unread)
        .then(m=>{
            // 问医底部红点
            let seek_unread_data = m.data
            sessionStorage.seek_unread = seek_unread_data.data
            this.$store.dispatch('fetchSeekUnread', sessionStorage.seek_unread)
            this.getMeUnread()
        }).catch(err=>{
          this.$dialog.loading.close()
          this.$dialog.alert({mes: JSON.stringify(err)})
        })
      },
      getMeUnread() {
        this.axios.get(api.me_unread)
        .then(m=>{
          //个人中心底部红点
          let me_unread_data = m.data
          sessionStorage.me_unread = me_unread_data.data.my_center_unread
          this.$store.dispatch('fetchMeUnread', sessionStorage.me_unread)
          this.getRecommend()
        }).catch(err=>{
          this.$dialog.loading.close()
          this.$dialog.alert({mes: JSON.stringify(err)})
        })
      },
      refresh(type) {
        // 换一批--药品推荐
        if(this.total <= this.pageIndex*1*4){
          this.pageIndex = 1
        }else{
          this.pageIndex = this.pageIndex + 1
        }
        this.$dialog.loading.open(api.default_loading_txt);
        this.getRecommend()
      },
      loadmore(){
        this.msgIndex = this.msgIndex+1
        this.getMsgList('next')
      },
      signed() {
        if(this.isSign) return
        this.$dialog.loading.open(api.default_loading_txt);
        this.axios.post(api.sign)
        .then(m=>{
          this.$dialog.loading.close()
          this.$router.push({path: 'sign', query: {path: 'home'}})
        }).catch(err=>{
          this.$dialog.loading.close()
          this.$dialog.alert({mes: '签到出错==' + JSON.stringify(err)})
        })
       
      }
    },
    mounted () {
      this.init();
    },
    components: { ydLsLayout, ydLsTitle, ydLsDefault, ydLsMore }


  }
</script>
